<!--
  @Descripttion:用户中心-面试邀约
  @Author：yejianbo
  @Date：2022年05月26日 12:35:40
-->
<template>
  <div class="invited-page">
    <pageCom>
      <!-- 头部导航栏 -->
      <div class="content-page">
        <div class="content">
          <div class="nav-com">
            <el-breadcrumb
              separator-class="el-icon-arrow-right"
              style="margin-bottom: 20px"
            >
              <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ name: 'userCenter' }">
                用户中心
              </el-breadcrumb-item>
              <el-breadcrumb-item>
                <span style="color: #3d6cb0">{{
                  $route.meta.title || "--"
                }}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="content-title">面试邀约</div>
          <div class="search-condition">
            <el-row>
              <el-col :span="12">
                <span class="condition-icon"></span>
                <el-cascader
                  size="mini"
                  v-model="queryParams.city"
                  style="margin-right: 15px"
                  :options="provinceAndCityData"
                  :show-all-levels="false"
                  @change="handleCityChange"
                  :props="{ value: 'label' }"
                  placeholder="请选择城市"
                ></el-cascader>
                <el-select v-model="status" placeholder="邀约状态" size="mini">
                  <el-option label="全部" value="0"> </el-option>
                  <el-option label="已确认邀约" value="5"> </el-option>
                  <el-option label="已拒绝邀约" value="4"> </el-option>
                </el-select>
                <el-button
                  size="mini"
                  type="text"
                  style="margin-left: 15px"
                  @click="reset"
                  >重置</el-button
                >
              </el-col>
              <el-col :span="12" style="text-align: right">
                <span class="tips-text">排序</span>
                <el-select
                  style="width: 169px"
                  v-model="rangType"
                  placeholder="请选择排序方式"
                  size="mini"
                >
                  <el-option label="投递时间由新到旧" value="1"> </el-option>
                  <el-option label="投递时间由旧到新" value="2"> </el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
          <div class="list">
            <el-empty
              description="暂无相关邀约"
              v-if="dataList.length <= 0"
            ></el-empty>
            <div
              class="item"
              :key="index"
              @click.stop="openDialog(item.id, item.jobId)"
              v-for="(item, index) in dataList"
            >
              <div class="title">
                {{ item.jobName }}
                <span
                  >{{
                    item.curriculumVitaeSendRecordRespDTO.lowestSalary +
                    "-" +
                    item.curriculumVitaeSendRecordRespDTO.highestSalary
                  }}元/天</span
                >
              </div>
              <div class="row">
                <span class="local-icon" />
                <span class="city">{{
                  item.curriculumVitaeSendRecordRespDTO.city
                }}</span>
                <span class="small-text">{{
                  item.curriculumVitaeSendRecordRespDTO.workPeriod
                }}</span>
                <span class="line"></span>
                <span class="small-text"
                  >{{
                    item.curriculumVitaeSendRecordRespDTO.practicePeriod
                  }}个月</span
                >
              </div>
              <div class="row2">
                {{ item.companyName }} <span class="line"></span>
                {{ item.industry }}
              </div>
              <div
                style="
                  width: 100%;
                  display: flex;
                  flex-flow: row nowrap;
                  justify-self: flex-end;
                "
              >
                <div class="tags" v-if="item.status == 3">已查看邀约</div>
                <div class="tags red" v-if="item.status == 4">已拒绝邀约</div>
                <div class="tags green" v-if="item.status >= 5">已确认邀约</div>
                <div class="new-icon" v-show="item.status == 2"></div>
              </div>

              <div class="date">
                <span class="open">查看邀约信息</span> 投递日期：{{
                  item.inviteDate
                }}
              </div>
            </div>
          </div>
          <el-pagination
            v-if="queryParams.total > 0"
            class="bottom-page"
            background
            small
            layout="prev, pager, next"
            :total="queryParams.total"
            :page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 30, 40, 50]"
            @size-change="pagesizeHandle"
            @current-change="currentChange"
            :current-page="queryParams.pageNo"
          >
          </el-pagination>
        </div>
      </div>
      <CenterDialog ref="centerDialog" v-if="dialog" v-loading="loading">
        <template v-slot:left>
          <div
            class="left-item"
            @click.stop="openDialog(jobInfo.id)"
            v-if="!loading"
          >
            <div class="title">
              {{ jobInfo.jobName }}
              <span
                >{{
                  jobInfo.lowestSalary + "-" + jobInfo.highestSalary
                }}元/天</span
              >
            </div>
            <div class="row">
              <span class="local-icon" />
              <span class="city">{{ jobInfo.city }}</span>
              <span class="small-text">{{ jobInfo.workPeriod }}</span>
              <span class="line" />
              <span class="small-text">{{ jobInfo.practicePeriod }}个月</span>
            </div>
            <div class="row2">
              {{ jobInfo.companyName }} <span class="line"></span>
              {{ jobInfo.industry }}
            </div>
            <div class="date">
              <span class="open" @click="linkToJobDetail(jobInfo.id)"
                >查看职位详情</span
              >
              最近操作：{{ jobInfo.publishTime }}
            </div>
          </div>
        </template>
        <template v-slot:right v-if="!loading">
          <!-- 邀约详情 -->
          <div class="right-detail" v-if="activeType === 1">
            <div class="right-detailhead">
              邀约详情 <span class="close-icon" @click="closeDialog">x</span>
            </div>
            <div class="right-detail-content">
              <div class="title">
                您好，我们很高兴的通知您来参加我企业的面试。具体安排如下，请准时前来!
              </div>
              <div class="row">
                <div class="left">面试时间</div>
                <div class="right">
                  <p class="text">{{ interInfo.inviteDate }}</p>
                </div>
              </div>
              <div class="row">
                <div class="left">面试方式</div>
                <div class="right">
                  <el-checkbox-group v-model="detailform.inviteWay">
                    <el-checkbox
                      v-for="item in inviteWay"
                      disabled
                      :label="item.value"
                      :key="item.value"
                      >{{ item.label }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </div>
              <div class="row">
                <div class="left">面试地点</div>
                <div class="right">
                  <div class="address">
                    <span class="position-icon"></span>
                    {{ interInfo.inviteAddress }}
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="left">其他</div>
                <div class="right">
                  <div
                    class="address"
                    v-if="interInfo.inviteContent"
                    v-html="interInfo.inviteContent.replace(/\n/gm, '<br>')"
                  ></div>
                </div>
              </div>
              <div class="row">
                <div class="left">注意事项</div>
                <div class="right">
                  <el-checkbox-group v-model="detailform.noticeItem">
                    <el-checkbox
                      :label="item.value"
                      disabled
                      v-for="item in attentionEvent"
                      :key="item.value"
                      >{{ item.label }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </div>
              <div class="row" v-if="interInfo.status == 4">
                <div class="left">原因</div>
                <div class="right">
                  <div
                    class="address"
                    v-if="interInfo.feedback"
                    v-html="interInfo.feedback.replace(/\n/gm, '<br>')"
                  ></div>
                </div>
              </div>
              <div class="btn-box">
                <div
                  class="btn reject"
                  v-if="interInfo.status < 4 && currentJobStatus === 0"
                  @click="changeActived(2)"
                  style="margin-right: 10px"
                >
                  拒绝邀约
                </div>
                <div
                  class="btn confirm"
                  v-if="interInfo.status < 4 && currentJobStatus === 0"
                  @click="submit(5)"
                >
                  确认邀约
                </div>
                <div
                  v-if="
                    [5, 7].indexOf(Number(interInfo.status)) > -1 &&
                    currentJobStatus === 0
                  "
                  class="btn confirm"
                  @click="linkTo('feedback')"
                >
                  点击反馈应聘结果
                </div>
              </div>
              <div class="reject-tips" v-if="currentJobStatus > 0">
                已停止招聘
              </div>
              <div class="feedback-tips" v-else-if="interInfo.status >= 5">
                已确认邀约
              </div>
              <div class="reject-tips" v-else-if="interInfo.status == 4">
                已拒绝邀约
              </div>
            </div>
          </div>
          <!-- 拒绝邀约 -->
          <div class="right-detail" v-if="activeType === 2">
            <div class="right-detailhead">
              拒绝邀约 <span class="close-icon" @click="closeDialog">x</span>
            </div>
            <div class="right-detail-content">
              <div class="row">
                <div class="left">面试时间</div>
                <div class="right">
                  <p class="text">2022年12月15日</p>
                </div>
              </div>
              <div class="row">
                <div class="reject-reason">
                  拒绝原因 <span class="">（非必填）</span>
                </div>
              </div>
              <el-input
                style="
                  width: 100%;
                  font-size: 16px;
                  font-family: PingFangSC-Regular, PingFang SC;
                "
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 8 }"
                placeholder="请输入内容"
                v-model="detailform.reasonText"
              >
              </el-input>
              <div class="btn-box">
                <div class="btn confirm" @click="submit(4)">提交</div>
              </div>
            </div>
          </div>
          <!-- 应邀成功 -->
          <div class="right-detail" v-if="activeType === 3">
            <div class="right-detailhead">
              邀约详情 <span class="close-icon" @click="closeDialog">x</span>
            </div>
            <div class="right-detail-content">
              <img
                class="success-icon"
                src="@/assets/images/success-icon.png"
                alt=""
              />
              <div class="succes-tips">应邀成功</div>
              <div class="btn-box" style="margin-bottom: 66px">
                <div class="btn confirm" @click="linkTo('feedback')">
                  点击反馈应聘结果
                </div>
              </div>
              <div class="safe-icon">安全提示</div>
              <div class="safe-tips">
                数据学徒实习平台严禁用人单位做出任何损害求职者合法权益的违法违规行为，包括但不限于扣押求职者证件、收取求职者财物、向求职者集资、让求职者入股、诱导求职者异地入职、异地参与培训等，您发现此类行为，请立即举报
              </div>
            </div>
          </div>
        </template>
      </CenterDialog>
      <div class="mobile-invited">
        <div class="invited-condition">
          <van-row>
            <van-col span="12">
              <div class="city" @click="show = true">
                <span>{{ queryParams.city }}</span>
                <img src="../../assets/images/user/downdrop.png" alt="" />
              </div>
            </van-col>
            <van-col span="12" class="condition-right">
              <van-dropdown-menu>
                <van-dropdown-item v-model="status" :options="invitedOption" />
                <img
                  class="dropdown-icon"
                  src="../../assets/images/user/downdrop.png"
                  alt=""
                />
              </van-dropdown-menu>
            </van-col>
          </van-row>
        </div>
        <div class="invited-list">
          <van-empty
            v-if="dataList.length <= 0"
            class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png"
            description="暂无数据"
          />
          <div v-else
            class="invited-item"
            :key="index"
            @click.stop="openDialog(item.id, item.jobId)"
            v-for="(item, index) in dataList"
          >
            <div class="title">
              <span class="title-name">{{ item.jobName }}</span>
              <span class="title-salary"
                >{{
                  item.curriculumVitaeSendRecordRespDTO.lowestSalary +
                  "-" +
                  item.curriculumVitaeSendRecordRespDTO.highestSalary
                }}元/天</span
              >
            </div>
            <div class="item-content">
              <div class="left-content">
                <div class="row">
                  <span class="local-icon" />
                  <span class="city">{{
                    item.curriculumVitaeSendRecordRespDTO.city
                  }}</span>
                  <span class="small-text">{{
                    item.curriculumVitaeSendRecordRespDTO.workPeriod
                  }}</span>
                  <span class="line"></span>
                  <span class="small-text"
                    >{{
                      item.curriculumVitaeSendRecordRespDTO.practicePeriod
                    }}个月</span
                  >
                </div>
                <div class="row2">
                  {{ item.companyName }} <span class="line"></span>
                  {{ item.industry }}
                </div>
                <div class="row3">
                  <span class="operation-time">最近操作：{{item.inviteDate}}</span>
                </div>
              </div>
              <div class="right-content">
                <div class="status">
                  <div class="tags" v-if="item.status == 3">已查看邀约</div>
                  <div class="tags red" v-if="item.status == 4">已拒绝邀约</div>
                  <div class="tags green" v-if="item.status >= 5">已确认邀约</div>
                  <div class="new-icon" v-show="item.status == 2"></div>
                </div>
                <div class="see-invited">查看邀约信息</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 移动端选择地区弹窗 -->
      <van-popup v-model="show" round position="bottom">
        <van-cascader
          v-model="value"
          title="请选择所在地区"
          :options="cityOptions"
          @close="show = false"
          @finish="onFinish"
        />
      </van-popup>
    </pageCom>
  </div>
</template>

<script>
import Vue from "vue";
import pageCom from "@/components/page/index.vue";
import {
  provinceAndCityData,
  inviteWay,
  attentionEvent,
  inviteResultType,
} from "@/utils/frontDataDict.js";
import CenterDialog from "./components/centerDialog.vue";
import {
  getInviteInfo,
  getInviteList,
  getJobInfo,
  updateInvite,
  isJob,
} from "../../request/api";
import { getWorkPeriodName } from "../../utils/frontDataDict";
import { formatTime, timestampToTime } from "../../utils/utils";
import { Empty } from "vant";
Vue.use(Empty);
export default {
  // 组件名称
  name: "userCenter",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { pageCom, CenterDialog },
  // 组件状态值
  data() {
    return {
      inviteResultType: inviteResultType,
      activeType: 1,
      attentionEvent: attentionEvent,
      detailform: {
        inviteWay: ["0"],
        noticeItem: [],
        inviteResult: ["1"],
        reasonText: "",
      },
      loading: true,
      dataList: [],
      rangType: "1", // 排序方式
      status: "0",
      inviteWay: inviteWay,
      dialog: false,
      provinceAndCityData: provinceAndCityData,
      queryParams: {
        city: "全国", // 城市
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      jobInfo: {},
      interInfo: {},
      currentJobStatus: 0, // 0 发布 1 暂停发布 2 删除
      invitedOption: [
        { text: "全部", value: "0" },
        { text: "未查看", value: "2" },
        { text: "已查看", value: "3" },
        { text: "已确认", value: "5" },
        { text: "已拒绝", value: "4" },
      ],
      show: false,
      cityOptions: [],
      value: '' // 城市下拉框的空值
    };
  },

  watch: {
    rangType: function (newValue, oldValue) {
      this.init();
    },
    status: function (newValue, oldValue) {
      this.init();
    },
  },
  created() {},
  mounted() {
    this.init();
    this.cityOptions = this.getCityData(provinceAndCityData);
  },
  // 组件方法
  methods: {
    getCityData(arr) {
      let newArr = arr.map((item) => {
        if (item.children) this.getCityData(item.children);
        item.text = item.label;
        return item;
      });
      return newArr;
    },
    onFinish({selectedOptions}) {
      this.show = false;
      let cityName = selectedOptions.map((option) => option.text);
      this.queryParams.city = cityName[1];
      this.init();
    },
    currentChange(e) {
      this.queryParams.pageNo = Number(e);
      this.init();
    },
    pagesizeHandle(val) {
      this.queryParams.pageSize = Number(val);
      this.init();
    },
    linkToJobDetail(id) {
      this.$router.push({
        path: `/jobDetail/${id}`,
      });
    },
    linkTo(routeName, id) {
      if (id) {
        localStorage.setItem("currentJobId", id);
        this.$router.push({ name: routeName, params: { id: id } });
      } else {
        this.$router.push({ name: routeName });
      }
    },
    changeActived(status) {
      this.activeType = status;
    },
    submit(status) {
      return new Promise((resolve, reject) => {
        let params = {
          status: "" + status,
          sendRecordId: this.interInfo.sendRecordId,
          id: this.interInfo.id,
          companyId: this.jobInfo.companyId,
          jobId: this.jobInfo.id,
          studentId: this.interInfo.studentId,
          userId: this.interInfo.studentId,
        };
        if (Number(status) === 4) {
          params.feedback = this.detailform.reasonText;
        }
        updateInvite(params).then((res) => {
          if (res.data) {
            if (Number(status) === 5) {
              this.activeType = 3;
            } else {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.closeDialog();
            }
            resolve();
          } else {
            this.$message.error(res.msg);
            reject();
          }
        });
      });
    },
    async closeDialog() {
      this.dialog = false;
      this.init();
    },
    openDialog(id, jobId) {
      let clientW = document.body.clientWidth;
      if (clientW > 768) {
        isJob({ id: jobId }).then((res) => {
          if (res.code === 0) {
            /**
             * 职位状态 0 发布 1 暂停发布 2 删除
             */
            this.currentJobStatus = Number(res.data);
            getInviteInfo({ id })
              .then((res) => {
                if (res.data) {
                  res.data.inviteDate &&
                    (res.data.inviteDate = timestampToTime(
                      new Date(res.data.inviteDate)
                    ));
                  try {
                    if (Array.isArray(JSON.parse(res.data.inviteWay))) {
                      this.detailform.inviteWay = JSON.parse(res.data.inviteWay);
                    }
                    if (Array.isArray(JSON.parse(res.data.noticeItem))) {
                      this.detailform.noticeItem = JSON.parse(
                        res.data.noticeItem
                      );
                    }
                  } catch {
                    () => {};
                  }
                  this.interInfo = res.data;
                  getJobInfo({ id: res.data.jobId })
                    .then((vv) => {
                      this.loading = false;
                      if (vv.data) {
                        try {
                          if (Array.isArray(JSON.parse(vv.data.industry))) {
                            vv.data.industry = JSON.parse(vv.data.industry)[1];
                          }
                          if (Array.isArray(JSON.parse(vv.data.city))) {
                            vv.data.city = JSON.parse(vv.data.city)[1];
                          }
                        } catch {
                          () => {};
                        }
                        try {
                          vv.data.workPeriod &&
                            (vv.data.workPeriod = getWorkPeriodName(
                              vv.data.workPeriod
                            ));
                        } catch (error) {
                          console.error(new Error("workPeriod不存在"));
                        }
                        vv.data.publishTime &&
                          (vv.data.publishTime = formatTime(
                            new Date(vv.data.publishTime)
                          ));
                        this.jobInfo = vv.data;
                      }
                    })
                    .catch((err) => {
                      this.loading = false;
                    });
                } else {
                  this.loading = false;
                }
              })
              .catch((err) => {
                this.loading = false;
              });
            this.activeType = 1;
            this.dialog = true;
          }
        });
      } else {
        this.$router.push({ name: "invitedDetails", query: { id, jobId }});
      }
      
    },
    init() {
      let params = {
        pageNo: this.queryParams.pageNo,
        pageSize: this.queryParams.pageSize,
        city: this.queryParams.city !== "全国" ? this.queryParams.city : "",
      };
      if (this.rangType == "2") {
        params.sortField = {
          field: "postDate",
          order: "desc",
        };
      }
      if (
        Array.isArray(this.queryParams.city) &&
        this.queryParams.city.length === 2
      ) {
        params.city = this.queryParams.city[1];
      }
      if (this.status && Number(this.status) !== 0) {
        params.status = this.status;
      }
      getInviteList(params).then((res) => {
        if (res.data) {
          let list = res.data.list;
          list = list.map((v) => {
            if (v.jobName.length >= 5) {
              v.jobName = v.jobName.slice(0, 5) + "...";
            }
            if (v.companyName.length >= 5) {
              v.companyName = v.companyName.slice(0, 5) + "...";
            }
            try {
              // 所属行业
              if (Array.isArray(JSON.parse(v.industry))) {
                v.industry = JSON.parse(v.industry)[1];
              }
            } catch {
              () => {};
            }
            try {
              // 所属城市
              let city = JSON.parse(v.curriculumVitaeSendRecordRespDTO.city);
              if (Array.isArray(city)) {
                v.curriculumVitaeSendRecordRespDTO.city = city[city.length - 1];
              }
            } catch (error) {
              v.curriculumVitaeSendRecordRespDTO.city = "--";
            }
            try {
              v.curriculumVitaeSendRecordRespDTO.workPeriod &&
                (v.curriculumVitaeSendRecordRespDTO.workPeriod =
                  getWorkPeriodName(
                    v.curriculumVitaeSendRecordRespDTO.workPeriod
                  ));
            } catch (error) {
              console.error(
                new Error("curriculumVitaeSendRecordRespDTO字段不存在")
              );
            }
            v.inviteDate && (v.inviteDate = formatTime(new Date(v.inviteDate)));
            return v;
          });
          this.dataList = list;
          this.queryParams.total = res.data.total;
        }
      });
    },
    // 城市切换
    handleCityChange(data) {
      this.init();
    },
    // 重置
    reset() {
      this.queryParams.city = "全国";
      this.status = "0";
      this.rangType = "1";
      this.init();
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.center-dialog {
  position: fixed !important;
}

.content-page {
  position: relative;
  width: 100%;
  height: 100%;

  .bannber {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 25px;
  }

  .content {
    position: relative;
    width: 100%;
    margin: 0 auto;

    .content-title {
      font-size: 28px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #37383d;
      line-height: 40px;
      margin-bottom: 15px;
    }

    .search-condition {
      .tips-text {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383d;
        line-height: 28px;
        margin-right: 12px;
      }

      .condition-icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url("../../assets/images/search-icon.png") no-repeat center
          center / cover;
        vertical-align: middle;
        margin-right: 13px;
      }
    }
  }

  .list {
    position: relative;
    width: 100%;
    overflow: hidden;

    .item {
      position: relative;
      width: calc((100% - 50px) / 3);
      min-height: 252px;
      float: left;
      margin: 20px 25px 0px 0;
      border-radius: 9px;
      background: url("../../assets/images/user/deliver-bg.png") no-repeat top
        center / cover;
      padding: 30px 18px 20px;
      border: 1px solid #d4d6da;
      cursor: pointer;
      overflow: hidden;
      .tags {
        position: relative;
        width: 138px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #ffffff;
        border-radius: 15px;
        border: 1px solid #fc9c21;
        color: #fc9c21;
        font-size: 16px;
        &.green {
          border-color: #6fc70f;
          color: #6fc70f;
        }
        &.red {
          border-color: #fe4e3d;
          color: #fe4e3d;
        }
      }
      &:nth-child(3n) {
        margin: 20px 0px 0px 0;
      }
      .title {
        font-size: 22px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 40px;
        position: relative;
        padding-right: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        > span {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 30px;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .row {
        position: relative;
        line-height: 30px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        .local-icon {
          display: inline-block;
          width: 20px;
          height: 24px;
          background: url("../../assets/images/user/local.png") no-repeat center
            center / cover;
          margin-right: 8px;
        }

        .city {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 30px;
          margin-right: 15px;
        }

        .small-text {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 30px;
        }

        .line {
          display: inline-block;
          width: 1px;
          height: 14px;
          background: #9597a0;
          margin: 0 10px;
        }
      }
      .row2 {
        position: relative;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 30px;
        margin-bottom: 10px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

        .line {
          display: inline-block;
          width: 1px;
          height: 14px;
          background: #9597a0;
          margin: 0 10px;
        }
      }
      .date {
        line-height: 30px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #c4c4c4;
        text-align: right;
        letter-spacing: 0;
        .open {
          float: left;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2f8efe;
          line-height: 30px;
        }
      }
      .new-icon {
        position: absolute;
        left: 0;
        top: 0;
        width: calc(100vw * 60 / 1920);
        height: calc(100vw * 28 / 1920);
        background: url("../../assets/images/news.png") no-repeat center center /
          cover;
      }
      &:hover {
        box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
        .title {
          color: #2f8efe;
        }
      }
    }
  }
}

.left-item {
  position: relative;
  width: 340px;
  border-radius: 5px;
  // background: url("../../assets/images/user/deliver-bg.png") no-repeat top
  //   center / cover;
  background: #fff;
  padding: 27px 16px 16px;
  border: 1px solid #d4d6da;
  border-top: 13px solid #4677b9;
  cursor: pointer;
  overflow: hidden;

  &:nth-child(3n) {
    margin: 30px 0px 0px 0;
  }

  .title {
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #37383d;
    line-height: 28px;
    margin-bottom: 22px;

    > span {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 20px;
      margin-left: 15px;
    }
  }

  .row {
    line-height: 20px;
    margin-bottom: 16px;

    .local-icon {
      display: inline-block;
      width: 13px;
      height: 16px;
      background: url("../../assets/images/user/local.png") no-repeat center
        center / cover;
      margin-right: 2px;
    }

    .city {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 20px;
      margin-right: 12px;
    }

    .small-text {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 20px;
    }

    .line {
      display: inline-block;
      width: 1px;
      height: 10px;
      background: #9597a0;
      margin: 0 13px;
    }
  }

  .row2 {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597a0;
    line-height: 20px;
    margin-bottom: 22px;

    .line {
      display: inline-block;
      width: 1px;
      height: 10px;
      background: #9597a0;
      margin: 0 16px;
    }
  }

  .date {
    line-height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #c4c4c4;
    text-align: right;

    .open {
      float: left;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2f8efe;
      line-height: 20px;
    }
  }

  .feedback-tips {
    position: absolute;
    right: 10%;
    bottom: 30%;
    border-radius: 4px;
    border: 1px solid #6fc70f;
    font-size: 26px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #6fc70f;
    line-height: 37px;
    padding: 0 18px;
    transform: rotateZ(-35deg);
  }
}

.right-detail {
  position: relative;
  width: 606px;
  background: #ffffff;

  .right-detailhead {
    position: relative;
    border-bottom: 1px solid #d4d6da;
    line-height: 56px;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #37383d;
    padding-left: 16px;

    .close-icon {
      position: absolute;
      width: 22px;
      height: 22px;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      line-height: 22px;
      display: block;
      align-items: center;
      justify-content: space-between;
      color: #b0b0b0;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
    }
  }

  .right-detail-content {
    position: relative;
    width: 100%;
    padding: 25px 30px 40px;

    .title {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 22px;
      margin-bottom: 17px;
    }

    .row {
      position: relative;
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      margin-bottom: 18px;

      .left {
        width: 80px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 22px;
        text-align: left;
        margin-right: 27px;
      }

      .reject-reason {
        width: 100%;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 22px;
        text-align: left;
        margin-right: 27px;

        span {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #c4c4c4;
          line-height: 20px;
        }
      }

      .right {
        flex: 1;
        overflow: hidden;
        line-height: 22px;

        .text {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 22px;
        }

        .address {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 22px;
          .position-icon {
            position: relative;
            display: inline-block;
            top: 2px;
            width: 16px;
            height: 19px;
            margin-right: 8px;
            background: url("../../assets/images/position.png") no-repeat center
              center / cover;
            // vertical-align: middle;
          }
        }
      }
    }

    .btn-box {
      position: relative;
      margin-top: 36px;
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;

      .btn {
        width: 168px;
        height: 45px;
        border-radius: 4px;
        border: 1px solid #4677b9;
        text-align: center;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #4677b9;
        cursor: pointer;
      }

      .confirm {
        background-color: #4677b9;
        color: #fff;
      }
    }

    .feedback-tips {
      position: absolute;
      right: 45px;
      top: 20%;
      border-radius: 4px;
      border: 2px solid #6fc70f;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #6fc70f;
      line-height: 50px;
      padding: 0 18px;
      transform: rotateZ(-35deg);
      z-index: 1;
    }

    .reject-tips {
      position: absolute;
      right: 45px;
      top: 20%;
      border-radius: 4px;
      border: 2px solid rgb(180, 52, 29);
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: rgb(180, 52, 29);
      line-height: 50px;
      padding: 0 18px;
      transform: rotateZ(-35deg);
      z-index: 1;
    }

    .feedback-confirm-tips {
      position: absolute;
      right: 45px;
      bottom: 20%;
      border-radius: 4px;
      border: 2px solid #6fc70f;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #6fc70f;
      line-height: 50px;
      padding: 0 18px;
      transform: rotateZ(-35deg);
      z-index: 1;
    }
    .btn-box {
      margin-bottom: 40px !important;
    }

    .success-icon {
      display: block;
      width: 80px;
      height: 80px;
      margin: 20px auto;
    }

    .succes-tips {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #37383d;
      line-height: 27px;
      margin-bottom: 20px;
      text-align: center;
    }

    .safe-icon {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #fc9c21;
      line-height: 20px;
      text-align: center;
      margin-bottom: 10px;
    }

    .safe-tips {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #c4c4c4;
      line-height: 17px;
    }
  }
}

#app .el-pagination.is-background .el-pager li:not(.disabled).active {
  width: 32px !important;
  height: 32px !important;
}

/deep/ .el-button--text {
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #3d6cb0;
  line-height: 21px;
}
@media (min-width: 769px) {
  .mobile-invited {
    display: none;
  }
}
@media (max-width: 768px) {
  .invited-page {
    min-height: 100%;
    background-color: #FAFAFA;
  }
  .content-page {
    display: none;
  }
  .mobile-invited {
    min-height: 3rem;
  }
  
  /deep/ .van-dropdown-menu__bar {
    height: 0.45rem;
    background: none;
    box-shadow: none;
  }
  /deep/ .van-dropdown-menu__title::after {
    content: none;
  }
  /deep/ .van-dropdown-menu__title--active {
    color: #2f8efe;
  }
  /deep/ .van-dropdown-item__option--active {
    color: #2f8efe;
  }
  /deep/ .van-dropdown-item__option--active .van-dropdown-item__icon {
    color: #2f8efe;
  }
  /deep/ .van-tabs__line {
    background-color: #4677b9;
  }
  /deep/ .van-cascader__option--selected {
    color: #4677b9;
  }
  .invited-condition {
    width: 100%;
    height: 0.45rem;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    position: fixed;
    top: 0.54rem;
    left: 0;
    background-color: #ffffff;
    .city {
      display: flex;
      height: 0.45rem;
      justify-content: center;
      align-items: center;
      img {
        width: 0.12rem;
        height: 0.07rem;
        margin-left: 0.25rem;
      }
    }
    .condition-right {
      position: relative;
      .dropdown-icon {
        position: absolute;
        width: 0.12rem;
        height: 0.07rem;
        top: 0.19rem;
        right: 0.4rem;
      }
    }
  }
  .line {
    display: inline-block;
    width: 1px;
    height: 0.1rem;
    background: #9597a0;
    margin: 0 0.15rem;
  }
  .invited-list {
    padding: 0.4rem 0 0.1rem 0;
  }
  .main-com {
    min-height: auto;
  }
  .invited-item {
    margin-bottom: 0.1rem;
    border-left: 1px solid #d4d6da;
    border-right: 1px solid #d4d6da;
    border-top: 0.1rem solid #4677b9;
    border-bottom: 1px solid #d4d6da;
    border-radius: 0.05rem;
    padding: 0.12rem 0.12rem 0.16rem;
    font-size: 0.13rem;
    color: #9597a0;
    background-color: #FFFFFF;
    .title {
      display: flex;
      height: 0.28rem;
      align-items: center;
      font-size: 0.2rem;
      font-weight: 500;
      color: #37383d;
      .title-name {
        flex: 1;
      }
      .title-salary {
        font-size: 0.13rem;
        color: #9597a0;
      }
    }
    .item-content {
      display: flex;
    }
    .left-content {
      flex: 1;
      .row {
        display: flex;
        height: 0.18rem;
        align-items: center;
        margin: 0.1rem 0;
        .local-icon {
          width: 0.13rem;
          height: 0.16rem;
          background: url("../../assets/images/position.png") no-repeat center
            center / cover;
        }
        .city {
          font-size: 0.13rem;
          color: #37383d;
          margin: 0 0.16rem 0 0.07rem;
        }
      }
      .row2 {
        font-size: 0.13rem;
        height: 0.18rem;
        line-height: 0.18rem;
        margin-bottom: 0.12rem;
      }
      .row3 {
        .operation-time {
          font-size: 0.12rem;
        }
      }
    }
    .right-content {
      padding-top: 0.3rem;
      .status {
        width: 0.9rem;
        height: 0.29rem;
        font-size: 0.13rem;
        background: #FFFFFF;
        .tags {
          width: 100%;
          line-height: 0.29rem;
          text-align: center;
          font-weight: 500;
          border-radius: 0.29rem;
          color: #FC9C21;
          border: 1px solid #FC9C21;
        }
        .red {
          color: #FE4E3D;
          border: 1px solid #FE4E3D;
        }
        .green {
          color: #6FC70F;
          border: 1px solid #6FC70F;
        }
      }
      .see-invited {
        height: 0.18rem;
        font-size: 0.13rem;
        color: #2F8EFE;
        line-height: 0.18rem;
        margin-top: 0.1rem;
        text-align: right;
      }
    }
  }
}
</style>
